<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <link rel="shortcut icon" href="src/favicon.png">
  <title>plantuml F2</title>
  <style>
    * {
      margin: 0;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
    }

    body {
      overflow-x: hidden;
    }

    #code-box,
    #uml-box {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: 0;
    }

    #code-box {
      width: 35%;
      position: fixed;
    }

    #code {
      height: 100%;
    }

    #uml-box {
      overflow-x: auto;
      text-align: center;
      background-color: #fcfcfc;
      right: 0;
      padding: 15px 10px 15px 105px;
      width: 65%;
    }

    #uml-box img {
      display: block;
    }

    #uml-box :not(:first-child) {
      margin-top: 20px;
    }

    #toolbar {
      position: fixed;
      z-index: 100;
      top: 0;
      bottom: 0;
      left: 35%;
      overflow-x: hidden;
      overflow-y: auto;
      width: 90px;
      /* 必须要设定宽度 */
      background-color: #dcdcdc;
      font-size: 0.86rem;
    }

    a {
      text-decoration: none;
      color: #333;
      margin: 0 auto;
      text-align: center;
    }

    #nav {
      list-style: none;
      margin: 1px;
      padding: 0;
      width: 88px;
      background-color: #dcdcdc;
    }

    #nav li a {
      height: 24px;
      width: 100%;
      line-height: 24px;
      margin-bottom: 1px;
      background-color: #efefef;
      display: block;
    }

    #nav li a:hover {
      background-color: #f66;
      color: #fff;
    }

    #nav .active {
      background-color: #f66;
      color: #fff;
    }

    @media screen and (max-width: 800px) {
      #box {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
      }

      #code-box {
        width: -moz-calc(100vw - 85px);
        width: -webkit-calc(100vw - 85px);
        width: calc(100vw - 85px);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 50%;
      }

      #uml-box {
        width: 100%;
        z-index: 101;
        left: 0;
        right: 0;
        top: 50%;
        bottom: 0;
        padding: 5px 10px;
        overflow-x: auto;
        overflow-y: auto;
        box-shadow: 10px 0 6px 0 rgba(0, 0, 0, 0.12)
      }

      #code {
        font-size: 0.86rem !important;
      }

      #toolbar {
        left: auto;
        right: 0;
        bottom: 50%;
      }
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="code-box">
      <pre id="code"></pre>
    </div>
    <div id="toolbar">
      <ul id="nav"></ul>
    </div>
    <div id="uml-box">
    </div>
  </div>
  <script src="src/jquery.min.js"></script>
  <script src="src/ace.js"></script>
  <script src="src/rawdeflate.js"></script>
  <script src="src/encode.js"></script>
  <script src="src/setting.js"></script>
  <script>
    $(function () {
      // 键盘绑定状态
      var isBindKey = false;

      // 初始化对象
      var editor = ace.edit('code');

      // 字体大小
      editor.setFontSize(18);

      // 自动换行,设置为off关闭
      editor.setOption('wrap', 'free');

      editor.getSession().setTabSize(2);

      // 给编辑器添加键盘绑定
      editor.commands.addCommand({
        name: 'myCommand',
        bindKey: { win: 'F2', mac: 'F2' },// mac: 'Command-M'
        exec: function (editor) {
          bindKey();
        },
        readOnly: false // 如果不需要使用只读模式，这里设置false
      });

      // 监听ace编辑器的改变事件，实时修改uml的src
      editor.getSession().on('change', function (e) {
        var v = editor.getValue();
        localStorage.setItem('plantumlData', v);
        setUmlBox(v)
      });

      // 初始化列表内容
      for (var i = 0; i < SNIPPETS.length; i++) {
        var item = '<li>';
        item += '<a index="' + i + '" href="javascript:;">';
        item += SNIPPETS[i].n;
        item += '</a>';
        item += '</li>';
        $('#nav').append(item)
      }

      // 列表jq对象
      $li = $('#nav>li a');

      // 列表点击事件
      $('#nav a').on('click', function () {
        var i = $(this).attr('index');
        $li.removeClass('active');
        insertSnippet(SNIPPETS[i].v);
      });

      //全局键盘绑定
      $(document).on('keydown', function (e) {
        // 按 F2 进入键盘模式
        if (e.keyCode == '113') {
          bindKey();
        } else if (isBindKey) {
          if (e.keyCode == '38') { //Up
            selectSnippet('up');
          } else if (e.keyCode == '40') { //Down
            selectSnippet('down');
          } else if (e.keyCode == '13') { //Enter
            var i = getSnippetIndex();
            insertSnippet(SNIPPETS[i].v);
            unBindKey();
          } else {
            unBindKey();
          }
        }
      });

      // 设置初始值（尝试从浏览器取值）
      editor.setValue(localStorage.getItem('plantumlData') || INIT_UML);

      function bindKey() {
        if (!isBindKey) {
          isBindKey = true;
        }
        $li.removeClass('active');
        $li.eq(0).addClass('active').focus();
        $('body').css({ 'overflow-y': 'hidden' });
      }
      function unBindKey() {
        isBindKey = false;
        $li.removeClass('active');
        editor.focus();
        $('body').css({ 'overflow-y': 'auto' });
      }

      // 获取选中的图形代码块索引
      function getSnippetIndex() {
        var i = $('.active').attr('index');
        return parseInt(i);
      }

      // 选择图形代码块
      function selectSnippet(direction) {
        var i = getSnippetIndex();
        if (direction == 'up') {
          i = i <= 0 ? 0 : i - 1;
        } else {
          var len = SNIPPETS.length - 1;
          i = i >= len ? len : i + 1;
        }
        $li.removeClass('active');
        $li.eq(i).addClass('active');
      }

      // 插入图形代码块 ^!
      function insertSnippet(snippet) {
        editor.focus();
        snippet = snippet.replace('^!', editor.getSelectedText());
        editor.session.replace(editor.getSelectionRange(), snippet);
      }
      // function insertSnippet(snippet) {
      //   editor.focus();
      //   let cur = editor.selection.getCursor();
      //   editor.gotoLine(cur.row + 1, cur.column);
      //   editor.insert(snippet);
      // }


      function setUmlBox(editorValue) {
        var re = new RegExp("(?\<\=" + PLANTUML_PREFIX + ")([\\s\\S]*?)(?\=" + PLANTUML_SUFFIX + ")", "gm")
        var umlArr = editorValue.match(re);
        if (umlArr === null) {
          var v = encodeUml(editorValue)
          $('#uml-box').html('<img src="' + PLANTUML_SERVER + v + '" />');
        } else {
          $('#uml-box').html('');
          for (var i = 0; i < umlArr.length; i++) {
            var v = encodeUml(umlArr[i])
            $('#uml-box').append('<img src="' + PLANTUML_SERVER + v + '" />')
          }
        }
      }
    });
  </script>
</body>

</html>